<template>
    <view class="content">

        <!-- 搜索框 -->
        <view class="cu-bar bg-green search fixed" :style="[{top:CustomBar + 'px'}]">
            <view class="search-form round">
                <text class="cuIcon-search"></text>
                <input type="text" placeholder="请输入客户名称/手机/电话" confirm-type="search" @input="searchCustom"></input>
            </view>
        </view>
        <!-- 排序、高级筛选 -->
        <!-- <view class="screen-cont">
		</view> -->
        <mescroll-uni top="100upx" class="my-mescroll" ref="mescrollRef" @init="mescrollInit" :down="downOption"
            :up="upOption" @down="downCallback" @up="upCallback">
            <!-- 客户列表 -->
            <view class="cus-list">
                <!-- 成交 -->
                <view class="item" v-for="(item, index) in dataList" :key="index" @click="showCusDetail(item)">
                    <view class="head">
                        <text class="text">{{item.customerName}}</text>
                        <view class="btn-box">
                            <view :class="item.isReceive==1?'deal-btn un-deal':'deal-btn deal'">
                                {{utils.getDictLabelName("customerReceive",item.isReceive)}}
                            </view>
                        </view>
                    </view>
                    <view class="cus-info">
                        <!-- <view class="info-item">
						<text class="left">创建者：{{item.createUserNickName}}</text>
					</view> -->
                        <view class="info-item flex">
                            <text class="left">最后跟进时间：{{item.receiveTime}}</text>
                            <!-- <view class="img-box">
							<image class="img" src="../../static/images/icon_money_select.png" mode=""></image>
							<image class="img" src="../../static/images/icon_star_select.png" mode=""></image>
						</view> -->
                        </view>
                        <view class="info-item flex" v-if="item.poolTime">
                            <text class="left">进入预约时间：{{item.poolTime}}</text>
                        </view>
                        <view class="info-item flex">
                            <text class="left">
                                业务类型：{{utils.getDictLabelName("customerType",item.customerType)}}
                            </text>
                        </view>
                    </view>
                </view>
                <!-- 未成交 -->
                <!-- <view class="item" @click="showCusDetail">
				<view class="head">
					<text class="text">测试</text>
					<view class="btn-box">
						<view class="deal-btn un-deal">已认领</view>
					</view>
				</view>
				<view class="cus-info">
					<view class="info-item">
						<text class="left">负责人：admin</text>
					</view>
					<view class="info-item flex">
						<text class="left">最后跟进时间：2021-03-14</text>
						 
					</view>
					<view class="info-item">
						<text class="left">客户等级：B（普通客户）</text>
					</view>
				</view>
			</view> -->
            </view>
        </mescroll-uni>
    </view>
</template>

<script>
    import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
    import api from '@/api/api.js';
    export default {
        mixins: [MescrollMixin],
        data() {
            return {
                mescroll: undefined,
                downOption: {
                    auto: false //是否在初始化后,自动执行downCallback; 默认true
                },
                upOption: {
                    onScroll: true,
                    use: true, // 是否启用上拉加载; 默认true
                    auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        tip: '暂无相关数据'
                    }
                },
                dataList: [],
                searchContent: '',
            }
        },
        onLoad() {
            // 修改顶部导航背景色
            uni.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: '#39b54a',
                animation: {
                    duration: 400,
                    timingFunc: 'easeIn'
                }
            })
        },
        onShow() {
            this.mescroll.resetUpScroll()
        },
        methods: {
            // mescroll组件初始化的回调,可获取到mescroll对象
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            /*下拉刷新的回调 */
            downCallback(mescroll) {
                mescroll.resetUpScroll()
            },
            /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
            upCallback(page) {
                this.getFullCustomerList(page);
            },
            getFullCustomerList(page) {
                var data = { page: page.num, searchVal: this.searchContent };
                var that = this;
                api.getFullCustomerList(data).then(
                    res => {
                        if (res.code == 200) {
                            console.log(res.data)
                            console.log(page.num)
                            //设置列表数据
                            if (page.num == 1) {
                                that.dataList = res.data.list;

                            } else {
                                that.dataList = that.dataList.concat(res.data.list);

                            }
                            that.mescroll.endBySize(res.data.list.length, res.data.total);

                        } else {
                            uni.showToast({
                                icon: 'none',
                                title: "请求失败",
                            });
                            that.dataList = null;
                            mescroll.endErr();
                            // that.mescroll.endSuccess(0);
                        }
                    },
                    rej => {}
                );
            },
            // 顶部搜索
            searchCustom(e) {
                let key = e.detail.value
                this.searchContent = key;
                this.upCallback({ num: 1, size: 10 })
            },
            // 查看客户详情
            showCusDetail(item) {
                uni.navigateTo({
                    url: './customDetail?customerId=' + item.customerId
                })
            }
        }
    }
</script>


<style scoped lang="scss">
    .bg-green {
        background-color: #39b54a;
    }

    // 筛选
    // .screen-cont{
    // 	height: 80upx;
    // 	background: #fff;
    // 	margin-top: 100upx;
    // }
    // 客户列表
    .cus-list {

        background: #fff;

        .item {
            padding: 20upx 40upx;
            border-bottom: 1px solid #f7f7f7;

            &:last-child {
                border-bottom: none;
            }

            .head {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .text {
                    font-size: 32upx;
                    color: #000;
                }

                .btn-box {
                    .deal-btn {
                        width: 100upx;
                        text-align: center;
                        padding: 10upx 0;
                        font-size: 24upx;
                        border-radius: 4upx;

                        &.deal {
                            background: #0aAC44;
                            color: #fff;
                        }

                        &.un-deal {
                            background: #EFEFEF;
                            color: #BDBDBD;
                        }
                    }
                }
            }

            .cus-info {
                .info-item {
                    &.flex {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .img-box {
                            display: flex;
                            align-items: center;

                            .img {
                                width: 40upx;
                                height: 40upx;
                                margin-left: 10upx;
                            }
                        }
                    }

                    .left {
                        font-size: 28upx;
                        color: #737373;
                    }
                }
            }
        }
    }
</style>